<template>
  <div>
    <div v-if="data.data.length > 0">
      <div class="banner" v-if="data.tabType == 1">
        <el-carousel ref="carousel" :interval="5000" :height="data.height + 'px'" arrow="never"
          indicator-position="none">
          <el-carousel-item v-for="(item, index) in data.data" :key="index">
            <img :src="item.url">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="banner_b" v-if="data.tabType == 2">
        <el-carousel ref="carousel" :interval="5000" :height="data.height + 'px'" arrow="never"
          indicator-position="none">
          <el-carousel-item v-for="(item, index) in data.data" :key="index">
            <img :src="item.url">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="banner" v-if="data.tabType == 3">
        <el-carousel ref="carousel" :interval="5000" type="vertical" :height="data.height + 'px'">
          <el-carousel-item v-for="(item, index) in data.data" :key="index">
            <img :src="item.url">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div v-else class="image_ull"><span class="el-icon-picture"></span></div>
  </div>
</template>

<script>
// import { swiper, swiperSlide } from "swiper/vue";
// import "swiper/dist/css/swiper.css";
// import 'swiper/css';
export default {
  // components: {
  //   swiper,
  //   swiperSlide,
  // },
  name: "Banner",
  props: ["data",],
  watch: {
    data: {
      handler(newData, oldData) {
        // 检查 tabType 是否发生了变化  
        console.log('Prop Value changed from1', oldData, 'to', newData.tabType);

        // 在这里执行你想要的逻辑  
        // this.state = false;
        // setTimeout(() => {
        //   this.state = true;
        // }, 200);
      },
      // 开启深度监听  
      deep: true
    },
  },

  data() {
    return {
      state: true,
      swiperOptions: {
        autoplay: true,
        speed: 1500,
        spaceBetween: 10,
        loop: true
      },
      swiperOptions2: {
        autoplay: true,
        speed: 1500,
        spaceBetween: 10,
        slidesPerView: 1.2,
        loopAdditionalSlides: 1,
        loop: true
      },
      swiperOptions3: {
        autoplay: true,
        speed: 1500,
        spaceBetween: 10,
        slidesPerView: 1.2,
        centeredSlides: true,
        loop: true
      }
    };
  },
  mounted() {
    console.log(this.data, "轮播页面优质吗1")
  },
  methods: {

  }
};
</script>

<style scoped lang="scss">
.image_ull {
  background: #ffffff;
  height: 176px;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c1c1c1;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
}

.banner {
  font-size: 0;
  margin: 5px 10px;

  img {
    width: 100%;
    height: 100%;
  }

  .el-carousel__indicator--horizontal {
    padding: 12px 4px;
  }

  .el-carousel__button {
    width: 12px;
  }


}

.banner_b {
  font-size: 0;


  img {
    width: 100%;
    height: 100%;
  }

  .el-carousel__indicator--horizontal {
    padding: 12px 4px;
  }

  .el-carousel__button {
    width: 12px;
  }

  .image-null {
    background: #ffffff;
    height: 176px;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c1c1c1;
  }
}
</style>
